<template>
  <div class="app-container " >
    <!--工具栏-->
    <div class="head-container ">
<!--      <h3>{{infoName}} & 交通信息</h3>-->
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.bus" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
          <!--          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />-->
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>

      <crudOperation :permission="permission">
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="900px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="中文名称" >
            <el-input  v-model="form.bus"  style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="中文信息">
            <editor-bar v-model="form.car" :key="form.id" :is-clear="isClear" @change="change" />
          </el-form-item>
          <el-form-item label="英文名称">
            <el-input  v-model="form.park"  style="width: 200px;"/>
          </el-form-item>

          <el-form-item label="英文信息">
            <editor-bar v-model="form.lon" :key="form.id+1" :is-clear="isClear" @change="change" />
          </el-form-item>
          <el-form-item label="交通类型">
            <el-select v-model="form.type" style="width: 145px" placeholder="请选择交通类型">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

<!--          <el-form-item label="纬度">-->
<!--            <el-input v-model="form.lat" style="width: 370px;"/>-->
<!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column v-if="columns.visible('bus')" prop="bus" :show-overflow-tooltip="true" label="中文交通名称"/>
<!--        <el-table-column v-if="columns.visible('car')" prop="car" :show-overflow-tooltip="true" label="中文交通信息">-->
<!--          <template slot-scope="scope">-->
<!--            <span style="height: 50%" v-html="scope.row.car"></span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column v-if="columns.visible('park')" prop="park" :show-overflow-tooltip="true" label="英文交通名称"/>
<!--        <el-table-column v-if="columns.visible('lon')" prop="lon" :show-overflow-tooltip="true" label="英文交通信息">-->
<!--          <template slot-scope="scope">-->
<!--            <span style="height: 50%" v-html="scope.row.lon"></span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column v-if="columns.visible('type')" prop="type" label="交通类型" >
          <template slot-scope="scope">{{scope.row.type | typeFilter}}</template>
        </el-table-column>
<!--        <el-table-column v-if="columns.visible('lat')" prop="lat" label="纬度"/>-->
        <el-table-column v-permission="['admin','traffic:edit','traffic:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
  import crudTraffic from '@/api/traffic'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import EditorBar from '@/views/components/wangEditor'

  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '景区路线', url: 'api/traffic', sort: 'id,desc', crudMethod: { ...crudTraffic } })
  const defaultForm = { id: null, bus: null, car: null, park: null, infoId: null, type: null, lon: null, lat: null }
  export default {
    name: 'Traffic',
    components: { pagination, crudOperation, rrOperation, udOperation ,EditorBar},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        isClear: false,
        infoName: '',
        permission: {
          add: ['admin', 'traffic:add'],
          edit: ['admin', 'traffic:edit'],
          del: ['admin', 'traffic:del']
        },
        typeList: [
          {
            value: 0,
            label: '内部交通'
          }, {
            value: 1,
            label: '外部交通'
          }
        ],
        rules: {
        }
      }
    },
    created() {
      this.init()
    },
    filters: {
      typeFilter(value) {
        if (value === 0) {
          return '内部交通'
        } else if(value===1){
          return '外部交通'
        }
      }
    },
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        const query = this.query
        if (query.type && query.bus) {
          this.crud.params[query.type] = query.value
        }
        return true
      },

      init() {
        this.form.infoId = this.$route.query.id
        this.form.type = this.$route.query.type
        this.infoName = this.$route.query.name

      },
      change(val) {
        console.log(val)
      },
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        this.crud.params['infoId'] = this.$route.query.id
        this.crud.params['type'] = this.$route.query.type
        return true
      },

      back() {
        this.$router.back(-1)
      }

    }
  }
</script>

<style scoped>
  .shop /deep/   .el-table td.el-table_1_column_3 .cell{
    height: 150px;
  }
  .shop /deep/   .el-table td.el-table_1_column_5 .cell{
    height: 150px;
  }
</style>
